<template>
  <div>
      根组件
      <hello-world :islogin="islogin" :list="list"></hello-world>
      <my-com @sendId="getid" @sendMoney="getmoney"></my-com>

      
  </div>
  <div class="one">
      <one-view></one-view>
  </div>
  <div class="up">
      <setup-async></setup-async>
  </div>

</template>
<script setup>
import HelloWorld from "@/components/HelloWorld.vue"
import MyCom from "@/components/MyCom.vue"
import OneView from "@/components/home/OneView.vue"
import setupAsync from "@/components/setupAsync.vue"
import {ref,reactive} from "vue"
// 自定义组件：
// 1、创建组件 src/components/xxx.vue
// 2、导入组件  并使用



// 2、组件传参：
// 1、父传子   
//      1、在父组件的子组件标签里 绑定自定义属性  值就是要传递的数据
//      2、在子组件里defineProps接收数据并使用
//      案例需求：父组件的islogin传给HelloWorld子组件
// 2、子传父
//      1、子组件通过defineEmits获取emit   事件发射器
//      2、通过emit发送自定义事件  emit(自定义事件名，要传的数据)
//      3、父组件的子组件标签里监听自定义事件，事件处理程序的形参就是接收的子组件传过来的数据
// 3、ref属性获取dom节点
//    ref属性获取组件实例，可以访问组件实例用defineExpose暴露出来的数据和方法
// 4、非父子组件通信  类似于vue2中用过发布订阅
//    vue3使用的是 mitt插件
//    实现步骤：
//          1、下载  npm i mitt
//          2、创建src/utils/bus.js  
//          3、订阅方(接收数据的组件)  订阅消息    bus.on()
//          4、发布方(传递数据的组件)   发布消息   bus.emit()
//    要求：myCom组件向HelloWorld组件传递一个数据 msg
 



let islogin= ref(true)
let list = reactive([1,2,3,4,5,6,7,8,])
   
   function getid(val){
       console.log(val) //就是传递过来的数据id
   }

   function getmoney(money){
       console.log(money)

   }




</script>
<style scoped>
.one{
    width:800px;
    height:500px;
    background-color:#999
}
.up{
    width: 800px;
    height: 300px;
    background-color: skyblue;
}


</style>